@tooltip-color: rgb(var(--color-white));
@tooltip-bg: rgb(var(--color-black));
@tooltip-arrow-width: 4px;

.tooltip {
    position: absolute;
    z-index: 1080;
    pointer-events: none;

    display: block;

    font-size: var(--font-size-xxs);

    visibility: visible;

    &-no-events {
        pointer-events: none;
    }

    &-hidden {
        display: none;
    }

    &-placement-top {
        padding: @tooltip-arrow-width 0;
    }

    &-placement-right {
        padding: 0 @tooltip-arrow-width;
    }

    &-placement-bottom {
        padding: @tooltip-arrow-width;
    }

    &-placement-left {
        padding: 0 @tooltip-arrow-width;
    }

    &-placement-top &-arrow,
    &-placement-topLeft &-arrow,
    &-placement-topRight &-arrow {
        bottom: 0;
        margin-left: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
        border-top-color: @tooltip-bg;
    }

    &-placement-top &-arrow {
        left: 50%;
    }

    &-placement-right &-arrow {
        left: 0;
        margin-top: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
        border-right-color: @tooltip-bg;
    }

    &-placement-right &-arrow {
        top: 50%;
    }

    &-placement-left &-arrow {
        right: 0;
        margin-top: -@tooltip-arrow-width;
        border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-left-color: @tooltip-bg;
    }

    &-placement-left &-arrow {
        top: 50%;
    }

    &-placement-bottom &-arrow {
        top: 0;
        margin-left: -@tooltip-arrow-width;
        border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
        border-bottom-color: @tooltip-bg;
    }

    &-placement-bottom &-arrow {
        left: 50%;
    }

    // Wrapper for the tooltip content
    &-inner {
        padding: var(--padding-xs) var(--padding-lg);

        color: @tooltip-color;
        text-align: left;
        text-decoration: none;

        background-color: @tooltip-bg;
        border-radius: var(--border-radius-base);
    }

    // Arrows
    &-arrow {
        position: absolute;

        width: 0;
        height: 0;

        border-color: transparent;
        border-style: solid;
    }
}
